<template>
  <el-dialog title="配置中心" :visible="visible" @close="handleClose" width="880px">
    <div class="flex-box setting-container">
      <div class="dialog-nav">
        <ul>
          <li :class="{active:isActive==0}" @click="isActive=0">
            <div>列表字段配置</div>
          </li>
          <li :class="{active:isActive==1}" @click="isActive=1">
            <div>其他配置</div>
          </li>
          <li :class="{active:isActive==2}" @click="isActive=2">
            <div>搜索条件配置</div>
          </li>
        </ul>
      </div>
      <div class="flex-box setting-content">
        <div class="main">
          <m-listField v-show="isActive == 0"></m-listField>
          <m-other v-show="isActive == 1"></m-other>
          <m-searchCriteria v-show="isActive == 2"></m-searchCriteria>
        </div>
        <div class="dialog-bottom t-right">
          <ui-button size="medium" @click="handleClose">取消</ui-button>
          <ui-button size="medium" type="blue">保存</ui-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {Dialog} from 'element-ui'
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false,
      },
      settingType: {
        type: String,
        default: 'listField'
      }
    },
    components: {
      [Dialog.name]: Dialog,
      'm-listField': () => import('./components/listField'),
      'm-other': () => import('./components/other'),
      'm-searchCriteria': () => import('./components/searchCriteria')
    },
    data () {
      return {
        isActive: 0,
        settingList: ['listField', 'other', 'search']
      }
    },
    watch: {
      settingType(val) {
        this.settingList.forEach((item,index) => {
          if(val == item){
            this.isActive = index
          }
        })
      },
      isActive (val) {
        this.$emit('changeActive', this.settingList[val])
      }
    },
    methods: {
      handleClose() {
        this.$emit('update:visible', false)
      },
    }
  }
</script>

<style lang="scss">
  
</style>
